import 'package:flutter/material.dart';
import 'package:flutter_syt/theme/theme_color.dart';
import 'package:flutter_syt/utils/click_utils.dart';

class RoleItemEntity {
  late String role;
  late List roleArr;
  late Function onTap;

  RoleItemEntity(this.roleArr, this.onTap, {this.role = '观众'});
}

class RoleBox extends StatefulWidget {
  final RoleItemEntity entity;
  const RoleBox(this.entity, {Key? key}) : super(key: key);
  @override
  State<StatefulWidget> createState() => _RoleBoxState();
}

class _RoleBoxState extends State<RoleBox> {
  String roleName = '';
  @override
  void initState() {
    roleName = widget.entity.role;
    String id = widget.entity.roleArr
        .firstWhere((element) => element.name == roleName)
        .id;
    widget.entity.onTap(id, roleName);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return
        // Container(
        //   // height: 130,
        //   height: 52.0 * widget.entity.roleArr.length,
        //   child:
        Column(
      mainAxisSize: MainAxisSize.min,
      children: widget.entity.roleArr
          .map(
            (e) => GestureDetector(
              onTap: ClickUtils.debounce(() {
                setState(() {
                  roleName = e.name;
                });
                widget.entity.onTap(e.id, e.name);
              }),
              child: Container(
                margin: EdgeInsets.only(top: 10),
                padding:
                    EdgeInsets.only(left: 16, right: 16, top: 10, bottom: 10),
                alignment: Alignment.centerLeft,
                // height: 42,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(
                    width: 0.5,
                    color: roleName == e.name
                        ? ThemeColor.primaryColor
                        : ThemeColor.colorBlack20,
                  ),
                  color: roleName == e.name
                      ? ThemeColor.primaryColor
                      : ThemeColor.bkColorFFFFFF,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: Text(
                        '${e.name}',
                        // maxLines: 2,
                        // overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                            fontSize: 16,
                            fontWeight: roleName == e.name
                                ? FontWeight.w500
                                : FontWeight.w400),
                      ),
                    ),
                    roleName == e.name
                        ? Icon(
                            Icons.done,
                            size: 16,
                          )
                        : Text(''),
                  ],
                ),
              ),
            ),
          )
          .toList(),
      // ),
    );
  }
}
